<main>
	<header>
		<div class="toolbar">
			<a class="bar-button back-button"><i class="dwz-icon-arrow-left"></i></a>
			<div class="header-title">marquee滚动</div>
			<a class="bar-button" data-href="tpl/iframe_page.html?dwz_callback=biz.iframeRender&page_title=marquee文档&page_url=https://dwzteam.github.io/dwz_mobile_doc_v1/#/doc/h5/widget/marquee" target="navView" rel="doc"><i class="dwz-icon-document"></i>文档</a>
		</div>
	</header>

	<section>

		<div class="scroll-content dwz-scroll">
			<div class="scroll">

				<div class="dwz-panel">
					<div class="panel-header">
						<label class="panel-title">marquee滚动文字</label>
					</div>
					<div class="panel-content dwz-marquee-txt" style="height:100px">
						<article class="marquee-item">
							DWZ Mobile 官方文档：封装了新版百度开放平台的人脸识别采集 SDK(活体检测)。人脸识别后可以精准截取头像，人脸抠图支持压缩比设定，从而解决了某些第三方实名认证接口图像大小不能超过 20K 的问题。[详细文档](https://dwzteam.github.io/dwz_mobile_doc_v1/#/doc/apicloud/dwzBaiduFaceLive)
						</article>
					</div>
				</div>

				<div class="divider"></div>

				<div class="dwz-panel">
					<div class="panel-header">
						<label class="panel-title">marquee滚动列表</label>
					</div>
					<div class="panel-content padding-h">

						<ul class="grid">
							<li class="tr">
								<div class="td w30"></div>
								<div class="td flex-1">城市</div>
								<div class="td w100 is-right">数量</div>
								<div class="td w100 is-right">趋势</div>
							</li>
						</ul>
						<div class="dwz-marquee-list">
							<ul class="grid">
								<li class="tr" data-id="1" onclick="(alert(JSON.stringify(this.dataset)))">
									<div class="td w30">1</div>
									<div class="td flex-1">北京</div>
									<div class="td w100 is-right">2000万</div>
									<div class="td w100 is-right"><i class="table-status-down"></i></div>
								</li>
								<li class="tr" data-id="2">
									<div class="td w30">2</div>
									<div class="td flex-1">上海</div>
									<div class="td w100 is-right">2000万</div>
									<div class="td w100 is-right"><i class="table-status-eq"></i></div>
								</li>
								<li class="tr" data-id="3">
									<div class="td w30">3</div>
									<div class="td flex-1">杭州</div>
									<div class="td w100 is-right">1500万</div>
									<div class="td w100 is-right"><i class="table-status-up"></i></div>
								</li>
								<li class="tr" data-id="4">
									<div class="td w30">4</div>
									<div class="td flex-1">广州</div>
									<div class="td w100 is-right">1500万</div>
									<div class="td w100 is-right"><i class="table-status-eq"></i></div>
								</li>
								<li class="tr" data-id="5">
									<div class="td w30">5</div>
									<div class="td flex-1">深圳</div>
									<div class="td w100 is-right">1500万</div>
									<div class="td w100 is-right"><i class="table-status-up"></i></div>
								</li>
								<li class="tr" data-id="6">
									<div class="td w30">6</div>
									<div class="td flex-1">成都</div>
									<div class="td w100 is-right">1500万</div>
									<div class="td w100 is-right"><i class="table-status-down"></i></div>
								</li>
								<li class="tr" data-id="7">
									<div class="td w30">7</div>
									<div class="td flex-1">重庆</div>
									<div class="td w100 is-right">1500万</div>
									<div class="td w100 is-right"><i class="table-status-up"></i></div>
								</li>
								<li class="tr" data-id="8">
									<div class="td w30">8</div>
									<div class="td flex-1">深圳</div>
									<div class="td w100 is-right">1500万</div>
									<div class="td w100 is-right"><i class="table-status-eq"></i></div>
								</li>
							</ul>

						</div>
					</div>
				</div>



			</div>
		</div>

	</section>

	<footer>
		<div class="form-bar padding-h">
			<button class="button primary" type="button">appendItem 插入</button>
			<button class="button success" type="button">updateItem 更新</button>
			<button class="button danger" type="button">removeItem 删除</button>
		</div>
	</footer>

</main>

<script type="text/javascript">
	function helper(tpl, params) {
		// console.log(this, tpl, params)

		// 滚动列表文字
		this.find('.dwz-marquee-txt').each(function(index, elem) {
			new DwzMarquee({
				$el: elem
			});
		});

		// 滚动列表示例
		var marquee = new DwzMarquee({
			$el: this.find('.dwz-marquee-list'),
			cls: "grid",
			itemCls: "tr",
			duration: 1000,
			delay: 3000,
			pageSize: 4
		});

		marquee.on($.event.type.activated, function($item) {
			console.log(new Date(), $item)
		});
		this.find('button.primary').click(function() {
			marquee.appendItem(`<li class="tr">
							<div class="td w30">#</div>
							<div class="td flex-1">测试</div>
							<div class="td w100 is-right">1500万</div>
							<div class="td w100 is-right"><i class="table-status-eq"></i></div>
						</li>`);
		});

		this.find('button.success').click(function() {
			marquee.updateItem(0, `<li class="tr">
							<div class="td w30">#</div>
							<div class="td flex-1">测试</div>
							<div class="td w100 is-right">1500万</div>
							<div class="td w100 is-right"><i class="table-status-eq"></i></div>
						</li>`);
		});

		this.find('button.danger').click(function() {
			marquee.removeItem(0); // 删除第一个

			// 删除全部
			// marquee.removeItem((i, el) => {
			// 	return true
			// });

			// 条件删除
			// marquee.removeItem((i, el) => {
			// 	return el.dataset.id > 2
			// });
		});
	}
</script>